<script setup lang='ts'>

</script>

<template>
    <div class="container">
        <div class="header">
            <!-- 占位 名字是header -->
            <slot name="header"></slot>
        </div>
        <div class="body">
            <slot></slot>
            <!-- 挖坑 -->
            <slot name="body">
                <!-- 默认内容 当没有内容传入的时候生效  -->
                <h1>我是默认的</h1>
            </slot>
        </div>
        <div class="footer">
            <slot name="footer"></slot>
        </div>
    </div>
</template>

<style scoped>
.header,
.body,
.footer {
    width: 100%;
    height: 200px;
    background-color: aquamarine;
}

.body {
    height: 600px;
    background-color: blueviolet;
    /* overflow: hidden; */
    overflow-y: auto;
}
</style>